<template>
  <div class="content-width communication-page-container menu-layout-container">
    <div class="left-container">
      <div class="navigation-block">
        <div class="navigation-item">
          <div class="navigation-item-content active">消息
            <i class="el-icon-arrow-down right-icon"></i>
          </div>
          <div class="extend navigation-sub-content note">
            <a href="javascript:;" class="router-link-exact-active router-link-active navigation-sub-item active">系统通知</a>
            <a href="javascript:;" class="navigation-sub-item">互动通知</a>
            <a href="javascript:;" class="navigation-sub-item">订单通知</a>
          </div>
        </div>
      </div>
    </div>
    <div class="right-container">
      <div class="communication-system-note-container">
        <div class="header-container mb-10">
          <el-card>系统通知</el-card>
        </div>

        <div class="content-container">
          <div class="table_paging card_list" style="min-height: 700px;">
            <div class="card_content_wrapper">
              <div class="loadMoreList">
                <div class="system-note-item-container">
                  <p class="title">成长等级升级了</p>
                  <p class="date">09-19</p>
                  <div class="el-row">
                    <div class="el-col el-col-21 label-left">
                      <p class="detail" style="padding-right: 20px;">恭喜您成长等级提升到了LV2，快去看看吧~</p>
                    </div>
                    <div class="el-col el-col-3 label-left">
                      <div class="operations-container">
                        <button type="button" class="edit el-button el-button--primary el-button--medium normal-button">
                          <span>立即查看</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="system-note-item-container">
                  <p class="title">admin 快去“我的练习室”实现本周小目标！</p>
                  <p class="date">09-19</p>
                  <div class="el-row">
                    <div class="el-col el-col-21 label-left">
                      <p class="detail" style="padding-right: 20px;">在这里，你将有很多伙伴： 练习室同学们，和你一起学习、群内交流， 课程的老师们，为你答疑解惑、在线指导， 中舞网小助手，教会你使用学舞练舞功能， 系统智能提醒，循序渐进，坚持就能成功！</p>
                    </div>
                    <div class="el-col el-col-3 label-left">
                      <div class="operations-container">
                        <button type="button" class="edit el-button el-button--primary el-button--medium normal-button">
                          <span>常见问题</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
//left-container
.communication-page-container {
  margin-top: 20px;
}
.content-width {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
div {
  display: block;
}
.menu-layout-container .left-container {
  float: left;
  margin-right: 10px;
  width: 170px;
  box-sizing: border-box;
}
.menu-layout-container .right-container {
  float: left;
  width: 1020px;
}
.menu-layout-container .left-container .navigation-block {
  background: #fff;
  border-radius: 4px;
  padding: 5px 0;
  margin-bottom: 10px;
}
.menu-layout-container .left-container .navigation-block .navigation-item-content {
  font-size: 14px;
  color: #111;
  padding: 17px 21px;
  cursor: pointer;
  position: relative;
  display: block;
  text-decoration: none;
}
.menu-layout-container .left-container .navigation-block .navigation-item .navigation-sub-content .navigation-sub-item {
  color: #111;
  font-size: 14px;
  padding: 12px 0 12px 49px;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
a {
  background-color: transparent;
}

//right-container
.header-container {
  border-radius: 4px;
  background-color: #fff;
  position: relative;
}
.header-container .header-tab-item {
  float: left;
  padding: 28px 30px;
  color: #111;
  font-size: 14px;
  position: relative;
}
.header-container .header-tab-item{
  color: #111;
  font-size: 14px;
}
.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}
.communication-system-note-container .content-container {
  padding: 10px 30px 10px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
}
.communication-page-container .table_paging, .mine-page-container .table_paging {
  background: #fff;
}
.card_content_wrapper {
  margin-top: 20px;
  padding-bottom: 20px;
}
.card_content_wrapper .loadMoreList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
}
.communication-system-note-container .content-container .system-note-item-container {
  position: relative;
  margin-right: 0!important;
  width: 100%;
  padding: 30px 0;
  border-bottom: 1px solid #e3e3e3;
}
.communication-system-note-container .content-container .system-note-item-container .title {
  color: #111;
  font-size: 16px;
  margin: 0;
}
.communication-system-note-container .content-container .system-note-item-container .date {
  color: #7d8090;
  font-size: 14px;
  position: absolute;
  top: 30px;
  right: 0;
  margin: 0;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.el-row {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-col-21 {
  width: 87.5%;
}
[class*=el-col-] {
  float: left;
  box-sizing: border-box;
}
.communication-system-note-container .content-container .system-note-item-container .detail {
  color: #7d8090;
  font-size: 14px;
  margin: 0;
  margin-top: 20px;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.el-col-3 {
  width: 12.5%;
}
[class*=el-col-] {
  float: left;
  box-sizing: border-box;
}
.communication-system-note-container .content-container .system-note-item-container .operations-container {
  padding: 19px 0 0;
}
.communication-system-note-container .content-container .system-note-item-container .operations-container .normal-button {
  width: 100px;
  height: 40px;
  display: inline-block;
  margin-right: 10px;
}
.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.communication-system-note-container .content-container .system-note-item-container .operations-container .el-button--primary {
  color: #fff;
  background-color: #f93684;
  border-color: #f93684;
}
.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
</style>
